<template>
  <div class="center">
    <!--头部-->
    <headhtml class="ipc-class"></headhtml>
    <!--主题-->
    <div class="left-nav hand-class ipc-class">
      <div style="background-color: black;color:#34fff0;margin: 0">导航</div>
      <div @click="showDivF(0)" style="margin: 0">个人中心</div>
      <div @click="showDivF(1)">订单记录</div>
      <div @click="showDivF(2)">联系代购</div>
      <div @click="showDivF(3)">限时秒杀</div>
      <div @click="showDivF(4)">关注的代购</div>
      <div @click="showDivF(5)">退出登录</div>
    </div>
    <!--个人中心-->
    <div v-if="showDiv===0" class="center-user ipc-class">

      <div class="info-head">
        <img title="点击修改头像" :src="imgHead" alt="">
        <input @change="fileChange($event)" type="file" id="upload_file" ref="picInput"/>
      </div>
      <div class="user-name">
        <div>用户昵称：<input class="info-input" type="text" v-model="userName" value="袁德旭"></div>
        <div>用户性别：<input class="info-input" type="text" v-model="userSex" value="男"></div>
        <div>用户手机：<input class="info-input" readonly="readonly" type="text" value="18778772464"></div>
        <div>用户积分：<input class="info-input" readonly="readonly" type="text" value="1615"></div>
        <div>会员等级：<input class="info-input" type="text" readonly="readonly" value="V8"></div>
        <div style="margin: 2% 45%" class="opt-btn hand-class ">
          <div>保存</div>
        </div>
        <div style="margin: 2% 45%" class="opt-btn hand-class" @click="updatePwd">
          <div>修改密码</div>
        </div>

      </div>
    </div>
    <!--订单记录-->
    <div v-if="showDiv===1" class="center-order ipc-class">
      <div class="order-head order">
        <ul class="order-list">
          <li>订单号</li>
          <li>代购商品</li>
          <li>单价</li>
          <li>数量</li>
          <li>订单状态</li>
          <li>总价</li>
          <li>物流号</li>
          <li class="order-opt">操作</li>
        </ul>
      </div>

      <div class="order" v-for="item of goodsList">
        <div class="order-num">
          <div>{{item.orderNo}}</div>
        </div>
        <div class="order-pic hand-class" title="点击查看商品详情">
          <img :src="item.goodsPicture" alt="">
          <div>{{item.goodsName}}</div>

        </div>
        <div class="order-num">
          <div>{{item.price}}</div>
        </div>
        <div class="order-num">
          <div>{{item.goodsNum}}</div>
        </div>
        <div class="order-num">
          <div>{{item.orderStatus}}</div>
        </div>
        <div class="order-num">
          <div>{{item.allPrice}}</div>
        </div>
        <div class="order-num">
          <div>{{item.logisticsNo}}</div>
        </div>
        <div class="order-num">
          <div class="hand-class order-del" style="width: 30%;margin:25% 45%">删除</div>
        </div>

      </div>

      <!--
            <div class="order">
              <div class="order-num">
                <div>201904281150234123</div>
              </div>
              <div class="order-pic hand-class" title="点击查看商品详情">
                <img src="http://img1.360buyimg.com/n6/jfs/t7582/66/3048380492/71753/acde79b5/59b85824N836bb714.jpg" alt="">
                <div>手机/苹果8/黑白红金玫瑰/美国/5G/全网通</div>

              </div>
              <div class="order-num">
                <div>5000</div>
              </div>
              <div class="order-num">
                <div>15/kg</div>
              </div>
              <div class="order-num">
                <div>未提交</div>
              </div>
              <div class="order-num">
                <div>8800</div>
              </div>
              <div class="order-num">
                <div>201904281150234123</div>
              </div>
              <div class="order-num">
                <div class="hand-class order-del" style="width: 30%;margin:25% 45%">删除</div>
              </div>

            </div>
      -->


    </div>
    <page v-if="showDiv===1" :allPageS="allPage" :jumpPageS="jumpPage" :showSizeS="showSize"
          :showPageListS="showPageList"></page>
    <!--联系代购-->
    <div v-if="showDiv===2" class="get-customer">
      <div class="run-div">
        <div class="dg-contact" v-for="item of contactList">
          <div><img :src="item.headSrc" alt=""
                    class="dg-head"></div>
          <div>代购姓名：{{item.name}}</div>
          <div class="dg-info">主代产品：{{item.mainCamp}}</div>
          <div class="dg-cont hand-class" :contactId="item.id">联系代购</div>
        </div>
      </div>
    </div>
    <!--限时秒杀-->
    <div v-if="showDiv===3">


    </div>
    <!--关注代购-->
    <!--退出登录-->


    <!--备案-->
    <icpinfo class="login-ipc"></icpinfo>
  </div>
</template>

<script>
  import headhtml from "../headhtml/headhtml"
  import icpinfo from "../icp/icpinfo"
  import page from "../page/page"

  export default {
    name: "center",
    components: {
      icpinfo,
      headhtml,
      page,
    },
    data() {
      return {
        showDiv: 3,
        imgHead: "http://p4.qhimg.com/dmfd/160_90_/t0178197aae56e0d6d8.jpg?size=640x426",
        pictureType: "jpg,jpeg,gif,png,bmp",
        userHeadFile: null,
        userName: "袁德旭",
        userSex: "男",
        allPage: 100,//总共页数
        jumpPage: null,//跳转页数
        showSize: 2,//初始化显示
        showPageList: [1, 2, 3, 4, 5, 6, 7, 8],//页数
        goodsList: [
          {
            id: "sadadsa",
            orderNo: "201904281150234123", //订单号
            goodsPicture: "http://img1.360buyimg.com/n6/jfs/t7582/66/3048380492/71753/acde79b5/59b85824N836bb714.jpg",//商品图片
            goodsName: "手机/苹果8/黑白红金玫瑰/美国/5G/全网通",//商品名称
            price: 5000, //商品价格
            goodsNum: "15",//商品数量
            orderStatus: "未提交",//订单状态
            allPrice: 5000,//总金额
            logisticsNo: "201904281150234123"//物流号
          },
          {
            id: "sadadsa",
            orderNo: "201904281150234123", //订单号
            goodsPicture: "http://img1.360buyimg.com/n6/jfs/t7582/66/3048380492/71753/acde79b5/59b85824N836bb714.jpg",//商品图片
            goodsName: "手机/苹果8/黑白红金玫瑰/美国/5G/全网通",//商品名称
            price: 5000, //商品价格
            goodsNum: "15",//商品数量
            orderStatus: "未提交",//订单状态
            allPrice: 5000,//总金额
            logisticsNo: "201904281150234123"//物流号
          },
          {
            id: "sadadsa",
            orderNo: "201904281150234123", //订单号
            goodsPicture: "http://img1.360buyimg.com/n6/jfs/t7582/66/3048380492/71753/acde79b5/59b85824N836bb714.jpg",//商品图片
            goodsName: "手机/苹果8/黑白红金玫瑰/美国/5G/全网通",//商品名称
            price: 5000, //商品价格
            goodsNum: "15",//商品数量
            orderStatus: "未提交",//订单状态
            allPrice: 5000,//总金额
            logisticsNo: "201904281150234123"//物流号
          },
          {
            id: "sadadsa",
            orderNo: "201904281150234123", //订单号
            goodsPicture: "http://img1.360buyimg.com/n6/jfs/t7582/66/3048380492/71753/acde79b5/59b85824N836bb714.jpg",//商品图片
            goodsName: "手机/苹果8/黑白红金玫瑰/美国/5G/全网通",//商品名称
            price: 5000, //商品价格
            goodsNum: "15",//商品数量
            orderStatus: "未提交",//订单状态
            allPrice: 5000,//总金额
            logisticsNo: "201904281150234123"//物流号
          },
        ],//商品信息
        contactList: [
          {
            id: "0",
            name: "蛇皮代购",
            mainCamp: "母婴，手机，数码，服装，零食，水果，药业",
            headSrc: "http://img4.duitang.com/uploads/item/201406/30/20140630212346_Lnmxr.jpeg",
          },
          {
            id: "0",
            name: "蛇皮代购",
            mainCamp: "母婴，手机，数码，服装，零食，水果，药业",
            headSrc: "http://img4.duitang.com/uploads/item/201406/30/20140630212346_Lnmxr.jpeg",
          },

          {
            id: "0",
            name: "蛇皮代购",
            mainCamp: "母婴，手机，数码，服装，零食，水果，药业",
            headSrc: "http://img4.duitang.com/uploads/item/201406/30/20140630212346_Lnmxr.jpeg",
          },
          {
            id: "0",
            name: "蛇皮代购",
            mainCamp: "母婴，手机，数码，服装，零食，水果，药业",
            headSrc: "http://img4.duitang.com/uploads/item/201406/30/20140630212346_Lnmxr.jpeg",
          },
          {
            id: "0",
            name: "蛇皮代购",
            mainCamp: "母婴，手机，数码，服装，零食，水果，药业",
            headSrc: "http://img4.duitang.com/uploads/item/201406/30/20140630212346_Lnmxr.jpeg",
          },
          {
            id: "0",
            name: "蛇皮代购",
            mainCamp: "母婴，手机，数码，服装，零食，水果，药业",
            headSrc: "http://img4.duitang.com/uploads/item/201406/30/20140630212346_Lnmxr.jpeg",
          },
          {
            id: "0",
            name: "蛇皮代购",
            mainCamp: "母婴，手机，数码，服装，零食，水果，药业",
            headSrc: "http://img4.duitang.com/uploads/item/201406/30/20140630212346_Lnmxr.jpeg",
          },
        ],//商品代购
      }
    },
    methods: {
      showDivF(index) {
        this.showDiv = index;
      },
      updatePwd() {
        this.$router.push({path: "/login/" + 1});
      },
      /**
       *
       * @param el
       */
      fileChange(e) {
        let file = this.$refs.picInput.files[0];
        if (file.type.indexOf("image") === 0) {
          if (this.$refs.picInput.files[0].size / 1024 / 1024 > 10) {

            alert("上传文件大于10M")
          } else {
            this.userHeadFile = file;
          }


        } else {
          alert("请上传正确格式")
          return
        }

      },

    },
    created() {

      /*    setTimeout(() => {
            this.$refs.pager1.showParameter(this.allPage, this.jumpPage, this.showSize, this.showPageList)
          }, 10)*/

    }
  }
</script>

<style scoped>
  .dg-cont {
    border: solid 1.5px #20ff7c;
    width: 35%;
    letter-spacing: 5px;
    background: #ffe2cf;
    margin: 0 32.5%;
  }

  .dg-info {
    text-decoration: underline;
    line-height: 25px;
    font-family: 微软雅黑;
    color: #ffbc38;

  }

  .dg-contact > > > div {
    margin-bottom: 2%;
  }

  .dg-head {
    width: 20%;
    height: 5%;
    margin-top: 3%;

  }

  .dg-contact {
    float: left;
    width: 20%;
    height: 13%;
    margin: 3% 2%;
    text-align: center;
    border: solid 1px red;
    font-size: 18px;
  }

  .run-div {
    height: 1500px;
    width: 100%;
    border: solid 1px red
  }

  .get-customer {
    height: 800px;
    width: 80%;
    border: solid 1px green;
    overflow: auto;

  }

  .order-opt {
    text-indent: 20px;
    letter-spacing: 20px;
  }

  .order-del {

  }

  .order-num > > > div {
    width: 100%;
    height: 20%;
    margin: 25% 0;

  }

  .order-num {
    text-align: center;
  }

  .order-pic > > > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 5px;
    width: 100%; /*宽根据实际需要写*/
  }

  .order-pic > > > img {
    width: 50%;
    height: 60%;
    margin: 5% 25%;
  }

  .order > > > div {
    width: 10%;
    height: 100%;
    margin: 0 1%;
    float: left;

  }

  .order {
    width: 100%;
    height: 20%;
    border-bottom: solid 1px gray;
    float: left;
  }

  .order-head {
    height: 5%;

  }

  .order-list > > > li {
    float: left;
    width: 8%;
    margin: 0 2.05%;
    font-size: 20px;
    text-align: center;
  }

  .opt-btn > > > div {

  }

  .opt-btn {
    background-color: #00e1ff;
    width: 10%;
    height: 25px;
    font-size: 20px;
    line-height: 25px;
    border-radius: 5px;
    margin: 0 45%;
    font-family: 微软雅黑;
  }

  .user-name > > > input {
    text-align: center;
    border: solid 1px black;
  }

  .user-name > > > div {

    margin: 2% 0;
  }

  .user-name {
    width: 100%;
    text-align: center;
    float: left;
  }

  .info-head {
    margin: 1% 0;
    border-bottom: #25a4bb solid 1px;

  }

  .info-head > > > img {
    text-align: center;
    width: 10%;
    height: 100%;
  }

  .center-user > > > div {
    width: 100%;
    height: 20%;
    text-align: center;

  }

  .center-order {
    width: 80%;
    height: 450px;
    border: solid 1px red;
  }

  .center-user {
    width: 60%;
    height: 500px;
    border: solid 1px red;
  }

  .left-nav > > > div:hover {
    box-shadow: 5px 3px 5px #000000;
  }

  .left-nav > > > div {
    text-align: center;
    height: 50px;
    line-height: 50px;
    margin: 2% 0;
    background-color: #03ffb2;
  }

  .login-ipc {
    z-index: 1;
    position: fixed;
    width: 100%;
    bottom: 0;
  }

  .left-nav {
    font-size: 25px;
    width: 15%;
    height: 400px;
    border: solid 1px red;
  }
</style>
